<template>
  <page-wrap :show-top="false" :title="titleText" back hideTab :hideSafeArea="true" style="overflow-y: hidden"
    :dark="false">
    <view class="wrapper" :style="'padding-top:' + navHeight + 'px;'" type="line">
      <view class="header" :style="'top:' + navHeight + 'px;'"></view>
      <scroll-view :style="'height: calc(100vh - ' + navHeight + 'px)'" :scroll-y="true" scroll-with-animation
        :scroll-into-view="scrollDomId">
        <view class="content">
          <template v-for="(item, index) in listDesciptionData">
            <view class="textContainer" v-if="
                item.showType == '' &&
                item.data.answer &&
                item.data.answer.answerContent
              " :key="index">
              <!-- <rich-text
                class="textContent"
                :nodes="item.answer && item.answer.answerContent"
              ></rich-text> -->

              <view class="textTitle">
                <view class="titleFlag"></view><text>{{ item.title }}</text>
              </view>
              <view class="textContent">
                <CheckMore :content="getFilterBrTagText(item.data.answer.answerContent)" :contentSlice="75"></CheckMore>
              </view>
            </view>
            <CorrespondingMajors v-else :key="index" :major="item.data" :title="item.title" :layerId="item.layerId">
            </CorrespondingMajors>
          </template>
        </view>
      </scroll-view>
    </view>
    <u-popup class="stylePopUpBuyJobDesciptionDetail" v-model="isPopupShow" mode="bottom"
      :mask-close-able="isPopupCloseable" :mask="false" :safe-area-inset-bottom="true" length="100%"
      :mask-custom-style="maskStyle">
      <view class="back" @click="backTopDetail"></view>
      <view class="contentMask">
        <view class="stylePopUpTitle">购买<span class="stylestylePopUpTitleJobName">{{
            positionName
          }}</span>永久查看该职业最新信息
        </view>
        <view class="stylePopUpContainer">
          <image class="stylePopUpImageFrame" :src="iconFrameSrc"></image>

          <view class="stylePopupBuyContainer" v-if="showType == 0">
            <image class="stylePopupImageBubble" :src="srcBubbleBg"></image>
            <image class="stylePopUpImageBuyTextBg" :src="srcBuyTextBg" @click="unlockJob"></image>
            <view class="stylePopUpImageBuyText" @click="unlockJob">立即解锁</view>
            <view class="stylePopUpPriceContainer">
              <view class="stylePopUpPriceRmb">¥</view>
              <view class="stylePopupPriceDiscount">{{price}}</view>
              <view class="stylePopUpPriceNormal">原价¥{{oriPrice}}/个</view>
            </view>
            <image class="stylePopUpImageBuy" :src="iconNewerBuyBg"></image>
          </view>

          <view class="stylePopupBuyContainer" v-if="showType == 1">
            <image class="stylePopupImageBubbleShare" :src="srcBubbleShare"></image>
            <button class="stylePopUpImageShareUnlock" @click="share" open-type="share">
              {{ shareSuccessText }}
            </button>
            <view class="stylePopUpPriceShareContainer">
              <view class="stylePopUpPriceNormal">原价¥{{oriPrice}}/个</view>
              <view class="stylePopUpPriceRmb">¥</view>
              <view class="stylePopupPriceDiscount">{{price}}</view>
              <button v-if="personId" class="stylePopupPriceDiscountBuy" @click="buyJobDescription">
                购买开通
              </button>
              <button v-else class="stylePopupPriceDiscountBuy" @click="handleLoginPage">
                购买开通
              </button>
            </view>
            <view class="stylePopupShareContainer">
              <image class="stylePopUpImageShare" :src="srcShareBg"></image>
              <image class="stylePopUpImageShareBuyBg" :src="srcShareBuyBg" @click="buyJobDescription"></image>
            </view>
          </view>

          <view class="stylePopupBuyContainer" v-if="showType == 2">
            <image class="stylePopupImageBubbleShareWaitingUnlock" :src="srcBubbleWaitingUnlock"></image>
            <button class="stylePopUpImageShareUnlock" @click="share" open-type="share">
              重新分享
            </button>
            <view class="stylePopUpPriceShareContainer" @click="buyJobDescription">
              <view class="stylePopUpPriceNormal">原价¥{{oriPrice}}/个</view>
              <view class="stylePopUpPriceRmb">¥</view>
              <view class="stylePopupPriceDiscount">{{price}}</view>
              <view class="stylePopupPriceDiscountBuy">购买开通</view>
            </view>
            <view class="stylePopupShareContainer">
              <image class="stylePopUpImageShare" :src="srcShareBg"></image>
              <image class="stylePopUpImageShareBuyBg" :src="srcShareBuyBg" @click="buyJobDescription"></image>
            </view>
          </view>

          <view class="stylePopupBuyContainer" v-if="showType == 3">
            <image class="stylePopupImageBubbleCollegeEntranceExamination" :src="srcBubbleCollegeEntranceExaminationBg">
            </image>
            <image class="stylePopUpImageBuyTextBg" :src="srcBuyTextBg" @click="buyJobDescription"></image>
            <view class="stylePopUpImageBuyText" @click="buyJobDescription">立即购买</view>
            <view class="stylePopUpPriceContainer">
              <view class="stylePopUpPriceRmb">¥</view>
              <view class="stylePopupPriceDiscount">{{price}}</view>
              <view class="stylePopUpPriceNormal">原价¥{{oriPrice}}/个</view>
            </view>
            <image class="stylePopUpImageBuy" :src="iconNewerBuyBg"></image>
          </view>
        </view>
      </view>
    </u-popup>
    <u-popup class="stylePopShareSuccess" v-model="isShareSuccessPopupShow" mode="center" :mask-close-able="true"
      :mask="true">
      <view class="styleShareSuccessContainer">
        <image :src="srcShareSuccess" class="styleShareSuccess"></image>
        <image :src="srcShareSuccessConfirm" class="styleShareSuccessConfirm" @click="isShareSuccessPopupShow = false">
        </image>
      </view>
    </u-popup>

    <LoginDialog ref="loginDialog" @loginSuccessBack="loginSuccessBack"></LoginDialog>
  </page-wrap>
</template>
<script>
import CheckMore from "./components/positionDetailComponents/checkMore";
import CorrespondingMajors from "./components/positionDetailComponents/correspondingMajors";
import WxLoginMixin from "@/mixins/wxLogin";
import ShareMixin from "@/mixins/share";
import {
  getJobDescriptionData,
  getJobDescriptionUnlockAndShare,
  clickShare,
  addOrderAndPay,
  unlockJobDescriptionFirst,
} from "@/api/modules/career";
import LoginDialog from "@/components/LoginDialog"
export default {
  mixins: [WxLoginMixin, ShareMixin],
  components: {
    CheckMore,
    CorrespondingMajors,
    LoginDialog
  },
  data() {
    return {
      maskStyle: {},
      personId: uni.getStorageSync("person-id").slice(2) || "",
      titleText: "",
      positionName: "",
      listDesciptionData: [],
      isPopupShow: false,
      isPopupCloseable: false,
      iconBg:
        this.$imgBaseSelf + "career/positionDictionary/job_description_bg.webp",
      srcBottomBg:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_bottom_bg.webp",
      iconFrameSrc:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_outline_red.webp",
      iconBuySrc: this.$imgBaseSelf + "career/positionDictionary/qrcode.webp",
      iconNewerBuyBg:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_newer_bottom_bg.webp",
      srcShareBg:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_share_bg.webp",
      srcShareBuyBg:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_buy_bg_large.webp",
      srcBubbleBg:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_bubble_newer.webp",
      srcBubbleCollegeEntranceExaminationBg:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_bubble_college_entrance_examination.webp",
      srcBubbleShare:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_bubble_share_unlock.webp",
      srcBubbleWaitingUnlock:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_bubble_waiting_unlock.webp",
      srcBuyTextBg:
        this.$imgBaseSelf +
        "career/positionDictionary/job_description_buy_bg.webp",
      srcShareSuccess:
        this.$imgBaseSelf + "career/positionDictionary/share_success.webp",
      srcShareSuccessConfirm:
        this.$imgBaseSelf +
        "career/positionDictionary/share_success_confirm.webp",
      isNeedBuy: "false",
      showType: 3,
      dataLockAndShare: {},
      isPaid: false,
      provider: [],
      layerId: "",
      productId: "",
      positionId: "",
      shareQuery: `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10&positionName=${this.positionName}&positionId=${this.positionId}`,
      sharePath: `/pagesSub/careerNew/positionDictionary/positionDetail?${this.shareQuery}`,
      shareTitle: "测测你想报的专业能做什么工作",
      // imageUrl:
      //   "https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/job_description_share_img.jpg",
      price: -1,
      oriPrice: -1,
      navHeight: 0,
      isShareSuccessPopupShow: false,
      shareSuccessText: "分享解锁",
      isFirstShow: true,
      isLogin: false,
      pageName: "",
    };
  },
  onLoad: function (option) {
    console.log("onLoad", option);
    this.titleText = option.title || "";
    this.isNeedBuy = option.isNeedBuy;
    this.positionId = option.positionId;
    this.layerId = option.layerId;
    this.positionName = option.positionName;
    this.shareTitle = this.positionName;
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    this.price = option.price / 100;
    this.oriPrice = option.oriPrice / 100;
    this.navHeight = getApp().globalData.navHeight - 5;
    this.shareQuery = `jumpPersonId=${this.personId}&jumpSource=10&sourceType=10&positionName=${this.positionName}&positionId=${this.positionId}`;
    this.sharePath = `/pagesSub/careerNew/positionDictionary/positionDetail?${this.shareQuery}`;
    console.log("imageUrl:" + this.imageUrl);
    console.log(this.sharePath);

    this.checkAuthSetting();
    this.getData();
    this.getLockAndShareState();

    this.pageName = option.pageName;
    wx.reportEvent("advertise", {
      uid: this.personId,
      plate: this.titleText,
      career: this.positionName,
      page: this.pageName,
    });
  },
  onPageScroll(e) {
    if (e.scrollTop > 50) {
      console.log("滚动了50");
    } else {
      console.log("滚动了-50");
    }
  },
  onShow() {
    console.log("职业描述onShow", wx.getStorageSync("wx-session3rd"));
    if (!wx.getStorageSync("wx-session3rd")) {
      console.log("职业描述login");
      this.login();
    }
    this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
    console.log(this.personId, this.isFirstShow);
    if (this.personId && !this.isFirstShow) {
      this.checkAuthSetting();
      this.getData();
      this.getLockAndShareState();
      this.isFirstShow = true;
    }
  },
  created() {
    console.log("created");
  },
  methods: {
    backTopDetail() {
      console.log("dd");
      uni.navigateBack();
    },
    getData() {
      const params = {
        id: this.positionId,
        layerIds: this.layerId,
      };
      console.log("获取数据", params);
      getJobDescriptionData(params).then((res) => {
        if (res.code == 200) {
          console.log("getJobDescriptionData", res.data);
          this.listDesciptionData = res.data;
        } else {
          console.log("请求失败");
        }
      });
    },
    getLockAndShareState() {
      const params = {
        positionId: this.positionId,
        personId: this.personId,
      };
      console.log("获取解锁和分享状态", params);
      if(!this.personId){
        this.isPopupShow = true;
        this.showType = 0;
      }else{
        getJobDescriptionUnlockAndShare(params).then((res) => {
          if (res.code == 200) {
            console.log("getJobDescriptionUnlockAndShare", res.data);
            this.dataLockAndShare = res.data;
            this.productId = res.data.productId;
            if (this.dataLockAndShare.lockStatus == "1") {
              this.isPopupShow = false;
            } else if (this.dataLockAndShare.lockStatus == "10") {
              this.isPopupShow = true;
              this.showType = 0;
            } else if (this.dataLockAndShare.lockStatus == "20") {
              this.isPopupShow = true;
              this.showType = 1;
            } else if (this.dataLockAndShare.lockStatus == "30") {
              this.isPopupShow = true;
              this.showType = 2;
            } else if (this.dataLockAndShare.lockStatus == "40") {
              this.isPopupShow = true;
              this.showType = 3;
            }
          } else {
            console.log("请求失败");
          }
          console.log("价格", parseInt(this.price));
          if (this.price == "0") {
            console.log("免费");
            this.isPopupShow = false;
          }
        });
      }
    },
    showPopupBuy() {
      this.isPopupShow = true;
    },
    getFilterBrTagText(content) {
      return content.replace(/<br>/g, "\n");
    },
    unlockJob() {
      wx.reportEvent("advertise", {
        uid: this.personId,
        bug: "新用户0元解锁",
        plate: this.titleText,
        career: this.positionName,
        page: this.pageName,
      });
      if(this.personId){
        const params = {
          positionId: this.positionId,
          personId: this.personId,
        };
        console.log("开始首次解锁", params);
        unlockJobDescriptionFirst(params).then((res) => {
          if (res.code == 200) {
            console.log("首次解锁成功");
            this.getData();
            this.isPopupCloseable = true;
            this.isPopupShow = false;
            uni.showToast({
              title: "恭喜解锁成功",
              icon: "none",
            });
          } else {
            console.log("首次解锁失败");
          }
        });
      }else{
        this.showLoginDialog();
      }
    },
    buyJobDescription() {
      wx.reportEvent("advertise", {
        uid: this.personId,
        bug: `${this.price}元付费`,
        plate: this.titleText,
        career: this.positionName,
        page: this.pageName,
      });
      console.log("购买报告");
      this.goToPay();
    },
    share() {
      wx.reportEvent("advertise", {
        uid: this.personId,
        bug: "分享解锁",
        plate: this.titleText,
        career: this.positionName,
        page: this.pageName,
      });
      console.log("---点击分享");
      uni.requestSubscribeMessage({
        tmplIds: ["X_lQBdOyEki6EUAOSV_67CSVMba545LAi-klPJbtFao"],
        complete: (res) => {
          this.shareNext();
        },
      });
    },

    shareNext() {
      const params = {
        positionId: this.positionId,
        personId: this.personId,
        shared: 1,
      };

      clickShare(params).then((res) => {
        if (res.code == 200) {
          console.log("分享上报成功", res);
          this.showType = 2;
          this.isShareSuccessPopupShow = true;
          // if ((this.showType = 1)) {
          //   this.shareSuccessText = "重新分享";
          //   this.srcBubbleShare =
          //     this.$imgBaseSelf +
          //     "career/positionDictionary/job_description_bubble_waiting_unlock.webp";
          // }
          return;
          uni.share({
            provider: "weixin",
            scene: "WXSceneSession",
            type: 5,
            imageUrl: res.data.sharePicture,
            title: res.data.shareTitle,
            miniProgram: {
              id: this.personId,
              path:
                res.data.shareUrl +
                "?positionId=" +
                this.positionId +
                "&sharePersonId" +
                this.personId,
              type: 0,
              // webUrl: 'http://uniapp.dcloud.io'
            },
            success: (ret) => {
              console.log(JSON.stringify(ret));
            },
            fail: function (err) {
              console.log("fail:" + JSON.stringify(err));
            },
          });
          this.getLockAndShareState();
        } else {
          console.log("请求失败");
        }
      });
    },
    goToPay() {
      const openid = uni.getStorageSync("openid");
      const params = {
        personId: this.personId,
        openId: openid,
        positionId: this.positionId,
        productId: this.productId,
      };
      console.log("goToPay", openid, params);
      uni.showLoading();
      uni.getProvider({
        service: "payment",
        success: (res) => {
          this.provider = res.provider;
          console.log("getProvider", res.provider);
          if (this.provider.indexOf("wxpay") >= 0) {
            console.log("addOrderAndPay");
            addOrderAndPay(params)
              .then((res) => {
                if (res && res.code == 200) {
                  console.log("获取订单成功", res.data);
                  this.requestPayment(res.data);
                } else {
                  console.log("获取订单失败");
                  uni.hideLoading();
                  uni.showToast({
                    title: res.status_desc,
                    icon: "none",
                  });
                }
              })
              .finally(() => {
                this.isPaid = false;
                console.log("未支付");
              });
          }
        },
        fail: (err) => {
          console.log(err);
        },
      });
    },
    requestPayment(data) {
      data.payData = JSON.parse(data.payData);
      console.log("requestPayment", data.payData);
      uni.requestPayment({
        provider: this.provider[0],
        timeStamp: data.payData.timeStamp,
        nonceStr: data.payData.nonceStr,
        package: data.payData.package,
        signType: data.payData.signType,
        paySign: data.payData.paySign,
        success: (res) => {
          this.handlePaySuccess(res);
        },
        fail: (err) => {
          this.handlePayFial(err);
        },
      });
    },
    handlePaySuccess(res) {
      if (this.price != 0) {
        getApp().reportPURCHASENew(this.price);
        console.log("上报购买成功");
      }
      console.log("购买成功");
      uni.hideLoading();
      uni.showToast({
        title: "购买成功",
        icon: "none",
      });
      this.isPopupShow = false;
      this.getData();
    },
    handlePayFial(res) {
      console.log("购买失败");
      uni.hideLoading();
      uni.showToast({
        title: "购买失败",
        icon: "none",
      });
    },
    // 登录成功后处理
    handleJump(personId) {
      this.personId = personId;
      console.log("授权成功返回");
      return;
    },
    showLoginDialog(){
      console.log("showLoginDialog");
      this.$refs.loginDialog.setVisibility(true);
    },
    loginSuccessBack(){
      console.log("loginSuccessBack");
      this.personId = uni.getStorageSync("person-id").slice(2) || undefined;
      this.getData();
      this.getLockAndShareState();
    }
  },
  watch: {
    titleText: {
      handler(newVal, oldVal) {
        console.log(`新的值: ${newVal}`);
        console.log(`旧的值: ${oldVal}`);
      },
    },
  },
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: "D-DIN-PRO-700-Bold"; /*定义字体名称*/
  src: url("https://img3.job1001.com/ypMp/elan/images/career/positionDictionary/D-DIN-PRO-700-Bold.ttf");
}

.wrapper {
  background-image: url($img-base + "career/positionDictionary/job_description_bg.webp");
  min-height: 100vh;
  background-repeat: no-repeat;
  background-size: 100% auto;
  overflow-y: hidden;

  .styleTitleText {
    color: red;
  }

  .header {
    background: red;
    margin-bottom: -1rpx;
    position: fixed;
    z-index: 999;
    width: 100%;
  }

  .content {
    .textContainer {
      margin-top: 160rpx;
      margin: 24rpx 32rpx;
      padding: 32rpx 44rpx;
      background: #ffffff;
      border-radius: 24rpx;

      .textTitle {
        display: flex;
        align-items: center;
        font-size: 32rpx;
        font-family: PingFang-SC-Heavy, PingFang-SC;
        font-weight: 800;
        color: #222222;
        line-height: 44rpx;

        .titleFlag {
          width: 8rpx;
          height: 36rpx;
          border-radius: 64rpx;
          background-color: #f75a3e;
          margin-right: 16rpx;
        }
      }

      .textContent {
        margin-top: 26rpx;
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #555555;
        line-height: 48rpx;
        white-space: pre-wrap;
        overflow: hidden;
      }

      .openBtn {
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #f75a3e;
        line-height: 36rpx;
        text-align: right;
      }
    }
  }
}

.stylePopUpBuyJobDesciptionDetail {
  ::v-deep .u-drawer-bottom {
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url($img-base + "career/positionDictionary/job_description_bottom_bg.webp");
  }

  .stylePopUpTitle {
    // margin-top: 200rpx;
    box-shadow: 0px -10px 15px #ffffff;
    padding-top: 25rpx;
    padding-left: 32rpx;
    padding-right: 32rpx;
    font-size: 32rpx;
    font-weight: 800;
    color: #222222;

    .stylestylePopUpTitleJobName {
      color: #f75a3e;
    }
  }

  .stylePopUpContainer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .stylePopUpImageFrame {
      margin-top: 24rpx;
      width: 686rpx;
      height: 236rpx;
    }

    .stylePopupBuyContainer {
      width: 100%;
      height: 116rpx;
      margin-top: 24rpx;
      margin-bottom: 10rpx;

      .stylePopupImageBubble {
        position: absolute;
        width: 184.71rpx;
        height: 48rpx;
        left: 64rpx;
      }

      .stylePopupImageBubbleCollegeEntranceExamination {
        position: absolute;
        width: 160.71rpx;
        height: 48rpx;
        left: 64rpx;
      }

      .stylePopupImageBubbleShare {
        position: absolute;
        width: 298rpx;
        height: 48rpx;
        left: 64rpx;
      }

      .stylePopupImageBubbleShareWaitingUnlock {
        position: absolute;
        width: 188rpx;
        height: 48rpx;
        left: 64rpx;
      }

      .stylePopUpImageShareUnlock {
        position: absolute;
        font-size: 28rpx;
        color: #ffffff;
        margin-top: 54rpx;
        left: 42rpx;
        padding-left: 40rpx;
        padding-right: 40rpx;
        padding-bottom: 30rpx;
        border-radius: 0;
        background-color: transparent;
        margin-right: 0;
        line-height: 1;
        font-family: "D-DIN-PRO-700-Bold";
        &::after {
          border: none !important;
        }
      }

      .stylePopUpImageBuyText {
        position: absolute;
        right: 76rpx;
        margin-top: 55rpx;
        font-size: 26rpx;
        color: #002a92;
        font-family: "D-DIN-PRO-700-Bold";
      }

      .stylePopUpImageBuyTextBg {
        width: 176rpx;
        height: 72rpx;
        position: absolute;
        right: 44rpx;
        margin-top: 37rpx;
      }

      .stylePopUpPriceContainer {
        position: absolute;
        display: flex;
        flex-direction: row;
        margin-top: 50rpx;
        margin-left: 80rpx;
        align-items: flex-end;

        .stylePopUpPriceRmb {
          color: #fff5d2;
          font-size: 24rpx;
          font-weight: bold;
        }

        .stylePopupPriceDiscount {
          color: #fff5d2;
          margin-left: 20rpx;
          font-size: 40rpx;
          line-height: 40rpx;
          font-weight: bold;
          font-family: "D-DIN-PRO-700-Bold";
        }

        .stylePopUpPriceNormal {
          color: #b0c7e3;
          margin-left: 40rpx;
          text-decoration: line-through;
          text-decoration-color: #f96666;
          font-weight: bold;
          color: #b0c7e3;
          font-size: 24rpx;
          line-height: 40rpx;
        }
      }

      .stylePopUpPriceShareContainer {
        position: absolute;
        display: flex;
        right: 60rpx;
        flex-direction: row;
        margin-top: 50rpx;
        margin-left: 80rpx;
        align-items: flex-end;

        .stylePopUpPriceNormal {
          color: #b0c7e3;
          text-decoration: line-through;
          text-decoration-color: #f96666;
          font-weight: bold;
          color: #b0c7e3;
          font-size: 24rpx;
          line-height: 40rpx;
        }

        .stylePopUpPriceRmb {
          color: #fff5d2;
          font-size: 20rpx;
          margin-left: 34rpx;
        }

        .stylePopupPriceDiscount {
          color: #fff5d2;
          margin-left: 20rpx;
          font-size: 40rpx;
          line-height: 40rpx;
          font-weight: bold;
          font-family: "D-DIN-PRO-700-Bold";
        }

        .stylePopupPriceDiscountBuy {
          padding-bottom: 4rpx;
          color: #ffffff;
          font-size: 28rpx;
          margin-left: 10rpx;
          padding-left: 0;
          padding-right: 0;
          border-radius: 0;
          background-color: transparent;
          margin-right: 0;
          line-height: 1;
          &::after {
            border: none !important;
          }
          // border: red;
          // border-width: 2rpx;
        }
      }

      .stylePopUpImageBuy {
        width: 690rpx;
        height: 96rpx;
        margin-top: 24rpx;
        margin-left: 30rpx;
      }

      .stylePopupShareContainer {
        display: flex;
        justify-content: space-between;
        flex-direction: row;
        margin-left: 30rpx;
        margin-right: 30rpx;
        margin-top: 24rpx;
        height: 114rpx;

        .stylePopUpImageShare {
          width: 210rpx;
          height: 92rpx;
        }

        .stylePopUpImageShareBuyBg {
          width: 458rpx;
          height: 90rpx;
        }
      }
    }
  }
}

.back {
  width: 120rpx;
  height: 120rpx;
  position: absolute;
  top: 28rpx;
  left: 0;
}

.contentMask {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #fff;
}

::v-deep .u-drawer-bottom {
  background-size: 100% 720rpx;
  background-position-y: bottom;
}

.stylePopShareSuccess {
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: transparent;

  .styleShareSuccessContainer {
    .styleShareSuccess {
      width: 590rpx;
      height: 284rpx;
    }

    .styleShareSuccessConfirm {
      margin-top: 18rpx;
      width: 592rpx;
      height: 92rpx;
    }
  }
}
</style>
<style lang="scss">
.stylePopUpBuyJobDesciptionDetail {
  ::v-deep .u-drawer-bottom,
  .uni-picker-custom {
    border-radius: 0 0 0 0;
  }
.stylePopShareSuccess {
  ::v-deep .u-mode-center-box {
    background-color: transparent !important;
  }
}
}
</style>